<template>
  <div class="filtrates">
    <!-- 添加按钮 -->
    <el-row type="flex" justify="end" style="bottom: 10px">
      <slot name="topButton"></slot>
    </el-row>
    <!-- 添加按钮 -->
    <!-- 表单 -->
    <el-form ref="formRef" :model="formData" size="mini" label-width="80px">
      <el-form-item label="学科" prop="filtrateSubject">
        <el-select
          v-model="formData.filtrateSubject"
          placeholder="请选择学科"
          clearable
          :style="{ width: '100%' }"
          @change="subchange(formData.filtrateSubject)"
        >
          <el-option
            v-for="(item, index) in filtrateSubjectOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录" prop="filtrateDirectory02">
        <el-select
          v-model="formData.filtrateDirectory02"
          placeholder="请选择二级目录"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in filtrateDirectory02Options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="filtrateLabel">
        <el-select
          v-model="formData.filtrateLabel"
          placeholder="请选择标签"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in filtrateLabelOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="filtrateKeyword">
        <el-input
          v-model="formData.filtrateKeyword"
          placeholder="请输入关键字"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="试题类型" prop="filtrateType">
        <el-select
          v-model="formData.filtrateType"
          placeholder="请选择试题类型"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in filtrateTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="难度" prop="filtrateDifficulty">
        <el-select
          v-model="formData.filtrateDifficulty"
          placeholder="请选择难度"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in filtrateDifficultyOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="filtrateDirection">
        <el-select
          v-model="formData.filtrateDirection"
          placeholder="请选择方向"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in filtrateDirectionOptions"
            :key="index"
            :label="item"
            :value="item"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="录入人" prop="filtrateTypeIn">
        <el-select
          v-model="formData.filtrateTypeIn"
          placeholder="请选择录入人"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in filtrateTypeInOptions"
            :key="index"
            :label="item.username"
            :value="item.id"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注" prop="filtrateRemarks">
        <el-input
          v-model="formData.filtrateRemarks"
          placeholder="请输入题目备注"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="企业简称" prop="filtrateAbbreviation">
        <el-input
          v-model="formData.filtrateAbbreviation"
          placeholder="请输入企业简称"
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-row type="flex" justify="space-around">
          <el-select
            class="filter-item"
            style="width: 120px"
            v-model="formData.province"
            filterable
            @change="cityBtn"
          >
            <el-option
              v-for="item in filtrateprovince"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            class="filter-item"
            style="width: 120px"
            v-model="formData.city"
            filterable
          >
            <el-option
              v-for="item in filtratecity"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-row>
      </el-form-item>
      <el-form-item size="large">
        <el-row type="flex" justify="end">
          <slot name="fromFooter"></slot>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="footer">
      <i class="el-icon-info"></i> &nbsp;数据一共<slot name="footer"></slot>条
    </div>
  </div>
</template>
<script>
import { simple as getsubjectslist } from '@/api/hmmm/subjects.js'
import { simple as getdirectorylist } from '@/api/hmmm/directorys'
import { simple as gettaglist } from '@/api/hmmm/tags.js'
import { simple as getuserlist } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
export default {
  components: {},
  props: {},
  data () {
    return {

      formData: {
        filtrateSubject: undefined,
        filtrateDirectory02: undefined,
        filtrateLabel: undefined,
        filtrateKeyword: undefined,
        filtrateType: undefined,
        filtrateDifficulty: undefined,
        filtrateDirection: undefined,
        filtrateTypeIn: undefined,
        filtrateRemarks: undefined,
        filtrateAbbreviation: undefined,
        province: undefined,
        city: undefined
      },

      filtrateSubjectOptions: [],
      filtrateDirectory02Options: [],
      filtrateLabelOptions: [],
      filtrateTypeOptions: questionType,
      filtrateDifficultyOptions: difficulty,
      filtrateDirectionOptions: direction,
      filtrateTypeInOptions: [],
      filtrateprovince: [],
      filtratecity: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.simple()
    this.cityBtn()
  },
  mounted () {

  },
  // updated () {
  //   this.citysBtn()
  // },
  methods: {
    // 获取学科信息
    async simple () {
      // 学科
      const { data } = await getsubjectslist()
      // 标签
      const tagData = await gettaglist()
      // 用户列表
      const userData = await getuserlist()
      // 获取城市
      // console.log(data)
      // console.log(dirData)
      this.filtrateSubjectOptions = data
      this.filtrateLabelOptions = tagData.data
      this.filtrateTypeInOptions = userData.data
      // console.log(this.filtrateTypeInOptions)
      // console.log(this.filtrateSubjectOptions)
    },
    // 目录
    async subchange (id) {
      // console.log(id)
      const dirData = await getdirectorylist({ subjectID: id })
      this.filtrateDirectory02Options = dirData.data
      // console.log(dirData)
    },
    cityBtn () {
      this.filtrateprovince = provinces()
      this.filtratecity = citys(this.formData.province)
    }
  }
}

</script>
<style lang="scss" scope>
.filtrates .el-form {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .el-form-item {
    width: 25%;
  }
}
.footer {
  background-color: rgb(244, 244, 244);
  height: 40px;
  line-height: 40px;
  color: rgb(150, 146, 146);
  padding-left: 20px;
  margin-bottom: 16px;
  border-radius: 2px;
  font-size: 14px;
}
</style>
